<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<title>角色管理</title>
<meta name="decorator" content="default" />
<%@include file="/WEB-INF/views/include/treeview.jsp"%>
<script type="text/javascript">
	$(function() {
		$("#name").focus();
		$("#inputForm").validate({
			rules: {
				name: {remote: "${ctx}/sys/role/checkName?oldName=" + encodeURIComponent("${role.name}")}
			},
			messages: {
				name: {remote: "角色名已存在"}
			},
			submitHandler: function(form){
				var ids = [], nodes = tree.getCheckedNodes(true);
				for(var i=0; i<nodes.length; i++) {
					ids.push(nodes[i].id);
				}
				$("#menuIds").val(ids);
				var ids2 = [], nodes2 = tree2.getCheckedNodes(true);
				for(var i=0; i<nodes2.length; i++) {
					ids2.push(nodes2[i].id);
				}
				$("#officeIds").val(ids2);
				loading('正在提交，请稍等...');
				form.submit();
			},
			errorContainer: "#messageBox",
			errorPlacement: function(error, element) {
				$("#messageBox").text("输入有误，请先更正。");
				if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
					error.appendTo(element.parent().parent());
				} else {
					error.insertAfter(element);
				}
			}
		});
		var setting = {
			check : {
				enable : true,
				nocheckInherit : true
			},
			view : {
				selectedMulti : false
			},
			data : {
				simpleData : {
					enable : true
				}
			},
			callback : {
				beforeClick : function(id, node) {
					tree.checkNode(node, !node.checked, true, true);
					return false;
				}
			}
		};
		// 用户-菜单
		var zNodes=[
				<c:forEach items="${menuList}" var="menu">
				{id:"${menu.id}", pId:"${not empty menu.parent.id?menu.parent.id:0}", name:"${not empty menu.parent.id?menu.name:'权限列表'}"}, </c:forEach>];
		// 初始化树结构
		var tree = $.fn.zTree.init($("#menuTree"), setting, zNodes);
		tree.setting.check.chkboxType = { "Y" : "ps", "N" : "s" };
		// 默认选择节点
		var ids = "${role.menuIds}".split(",");
		for(var i=0; i<ids.length; i++) {
			var node = tree.getNodeByParam("id", ids[i]);
			try{tree.checkNode(node, true, false);}catch(e){}
		}
		// 默认展开全部节点
		tree.expandAll(true);
		// 用户-机构
		var zNodes2=[
				<c:forEach items="${officeList}" var="office">{id:"${office.id}", pId:"${not empty office.parent?office.parent.id:0}", name:"${office.name}"},
	            </c:forEach>];
		// 初始化树结构
		var tree2 = $.fn.zTree.init($("#officeTree"), setting, zNodes2);
		// 不选择父节点
		tree2.setting.check.chkboxType = { "Y" : "ps", "N" : "s" };
		// 默认选择节点
		var ids2 = "${role.officeIds}".split(",");
		for(var i=0; i<ids2.length; i++) {
			var node = tree2.getNodeByParam("id", ids2[i]);
			try{tree2.checkNode(node, true, false);}catch(e){}
		}
		// 默认展开全部节点
		tree2.expandAll(true);
		// 刷新（显示/隐藏）机构
		refreshOfficeTree();
		$("#dataScope").change(function(){
			refreshOfficeTree();
		});
	});
	function refreshOfficeTree(){
		if($("#dataScope").val()==9){
			$("#officeTree").show();
		}else{
			$("#officeTree").hide();
		}
	}
</script>
</head>

<body>
	<ul class="nav nav-tabs">
		<li><a href="${ctx}/sys/role/">角色列表</a></li>
		<li class="active"><a href="${ctx}/sys/role/form?id=${role.id}">角色<shiro:hasPermission
					name="sys:role:edit">${not empty role.id?'修改':'添加'}</shiro:hasPermission>
				<shiro:lacksPermission name="sys:role:edit">查看</shiro:lacksPermission></a></li>
	</ul>
	<br />

		<tags:message content="${message}" />
		<div class="control-group">
			<label class="control-label">归属机构:${role.office.name}</label>
		</div>
		<div class="control-group">
			<label class="control-label">角色名称:${role.name}</label>
		</div>
		<div class="control-group">
			<label class="control-label">英文名称:${role.enName}</label>
		</div>
		<div class="control-group">
			<label class="control-label">角色类型:${role.roleType}</label>
		</div>
		<div class="control-group">
			<label class="control-label">数据范围:${dic:getLabelByValue(role.dataScope,'sys_data_scope')}</label>
		</div>
		<div class="control-group">
			<label class="control-label">角色授权:</label>
			<div class="controls">
				<div id="menuTree" class="ztree"
					style="margin-top: 3px; float: left;"></div>
				<div id="officeTree" class="ztree"
					style="margin-left: 100px; margin-top: 3px; float: left;"></div>
			</div>
		</div>
</body>
</html>